<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col">
      <view class="fun-flex-col group_2">
        <view class="fun-flex-col section_2">
          <view class="fun-flex-row fun-justify-between">
            <text class="font_2 text_3">Top Up Amount</text>
            <text class="font_2 text_4">$10,000.00</text>
          </view>
          <view class="fun-mt-16 fun-flex-row fun-justify-between fun-items-baseline">
            <text class="font_2 text_5">Transaction Fee</text>
            <text class="font_2 text_6">$30.00</text>
          </view>
        </view>
        <view class="fun-flex-col section_3">
          <text class="fun-self-center font text_7">Total Amount You need to Top Up:</text>
          <view class="fun-flex-col fun-self-stretch group_3">
            <view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch fun-relative group_4">
              <text class="font_3 text_8">2.91</text>
              <text class="font_3 text_9 pos_2">ETH</text>
            </view>
            <view class="fun-flex-row fun-self-stretch group_5">
              <text class="font_4">Order Number：</text>
              <text class="fun-ml-22 font_4">T20240817492746284</text>
            </view>
            <text class="fun-self-start font text_11">Recharge Address：</text>
            <text class="fun-self-stretch font text_12">TY3YD7CaVstBvoJToFTjiPbgdfF7x5MzB</text>
          </view>
          <view class="fun-flex-col fun-self-stretch group_6">
            <image class="fun-self-center image_5" src="../../../static/42fdebdb9a867ed12ff964a694a804bd.png" />
            <view class="fun-flex-col fun-justify-start fun-items-center fun-self-stretch text-wrapper">
              <text class="text_13" @click="copy">Copy the Address</text>
            </view>
          </view>
        </view>
        <view class="group_7">
          <text class="font_5">1.Please be sure to enter the</text>
          <text class="font_5 text_14">exact amount</text>
          <text class="font_5">
            of the above crypto currency transfer. Any transaction failure due to inaccurate amounts or currency type
            will be at your own risk.
            <br />
            <br />
          </text>
          <text class="font_5">
            2.If you withdraw crypto from the exchange, a handling fee may be deducted by the exchange, please make sure
            to check the amount of the arrival.
            <br />
            <br />
          </text>
          <text class="font_5">
            3.This recharge QR code or address is valid within 30 minutes, please do not delay or repeat payment.
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {};
    },

    methods: {
		copy(){
			uni.setClipboardData({
				data: 'TY3YD7CaVstBvoJToFTjiPbgdfF7x5MzB',
				success: function () {
					console.log('success');
				}
			});
		}
	},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .mt-11 {
    margin-top: 22rpx;
  }
  .page {
    padding: 16rpx 0 170rpx;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 68rpx;
      padding-right: 28rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
      }
      .image {
        width: 34rpx;
        height: 24rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 26rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 26.52rpx;
      }
    }
    .section {
      padding: 32rpx 32rpx 28rpx;
      background-color: #00033b;
      .image_4 {
        width: 48rpx;
        height: 48rpx;
      }
      .pos {
        position: absolute;
        left: 32rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      .text_2 {
        font-weight: 300;
      }
    }
    .group_2 {
      padding: 0 32rpx;
      .section_2 {
        padding: 36rpx 24rpx 44rpx 32rpx;
        background-color: #1b1d53;
        border-radius: 24rpx;
        .font_2 {
          font-size: 26rpx;
          font-family: SF Pro Display;
          font-weight: 700;
          color: #ffffff;
        }
        .text_3 {
          font-size: 28rpx;
        }
        .text_4 {
          font-size: 28rpx;
        }
        .text_5 {
          font-size: 28rpx;
        }
        .text_6 {
          margin-right: 10rpx;
          font-size: 28rpx;
        }
      }
      .section_3 {
        margin-top: 28rpx;
        padding: 28rpx 0 34rpx;
        background-color: #1b1d53;
        border-radius: 24rpx;
        .text_7 {
          font-weight: 700;
        }
        .group_3 {
          margin-top: 44rpx;
          padding: 0 28rpx;
          .group_4 {
            padding-bottom: 20rpx;
            border-bottom: solid 4rpx #ffffff24;
            .font_3 {
              font-size: 60rpx;
              font-family: SF Pro Display;
              font-weight: 700;
              color: #ffffff;
            }
            .text_8 {
              margin-left: 196rpx;
            }
            .text_9 {
              line-height: 42.28rpx;
            }
            .pos_2 {
              position: absolute;
              right: 152.7rpx;
              top: 0;
            }
          }
          .group_5 {
            margin-top: 32rpx;
            .font_4 {
              font-size: 32rpx;
              font-family: SF Pro Display;
              color: #ffffff;
            }
          }
          .text_11 {
            margin-top: 24rpx;
          }
          .text_12 {
            margin-top: 20rpx;
          }
        }
        .group_6 {
          margin-top: 64rpx;
          .image_5 {
            width: 378rpx;
            height: 376rpx;
          }
          .text-wrapper {
            padding: 32rpx 0 24rpx;
            background-color: #5ceec4;
            border-radius: 44rpx;
			width: 80%;
			margin: 32rpx auto 0;
            .text_13 {
              color: #000000;
              font-size: 32rpx;
              font-family: SF Pro Display;
              font-weight: 700;
            }
          }
        }
      }
      .group_7 {
        margin-left: 8rpx;
        margin-top: 12rpx;
        line-height: 32rpx;
        .font_5 {
          font-size: 26rpx;
          font-family: SF Pro Display;
          font-weight: 300;
          color: #7f819d;
        }
        .text_14 {
          font-weight: 700;
        }
      }
    }
    .font {
      font-size: 32rpx;
      font-family: SF Pro Display;
      font-weight: 600;
      color: #ffffff;
    }
  }
</style>